<template>
	<div class="ordering-index" v-if="data">
		<div class="index-top layout pl30rem pr30rem">
			<!-- <div class="site">
				<span class="fs32rem white">东莞</span>
				<i class="iconfont icon-xia fs24rem white"></i>
			</div> -->
			<div class="search-mask" @click="toSearch"></div>
			<search-bar class="flex_1" :searchType="true"/>
			<inform></inform>
		</div>
		<section class="ordering-banner">
			<swiper :data="bannerC" :options="bannerCOptions" img-key="adv_image" imgLink="adv_url" typeLink="ordering" wh="h_420">
			</swiper>
		</section>
		<section class="nav border-b20">
			<ul class='pb20'>
		        <li v-for="(item, index) in data.nav" class="mt20" :style="{ backgroundImage:'url(' + img_url + item.logo + '?x-oss-process=image/resize,m_pad,w_166,h_166)' }"  @click="jumpForDetail(item)">
		        	{{ item.nav_title }}
		        </li>
		    </ul>
		</section>
		<section class="new-product">
			<h3 class="product-title layout align-center pt50rem pb50rem"> 
				<p class="layout">
					<i class="rhombus rhombus-son"></i>
					<i class="rhombus ml15rem"></i>
				</p>
				<strong class='fs34rem c333 bold'>今日新品推荐</strong>
				<p class="layout">
					<i class="rhombus mr15rem"></i>
					<i class="rhombus rhombus-son"></i>
				</p>
			</h3>
			<div class="pb50rem product-list">
				 <ul class="list-content flex-left flex-w">
				 	<li class="mr10rem mb10rem" v-for="(item,index) in data.yg_recommand" :key='index' @click="jumpDetail(item)">
				 		<p class="fs24rem c333 bold pt20rem pb20rem pl5rem pr5rem ellipsis align-center auto" style="width:78%;">{{ item.goods_name }}</p> 
						<!-- <div class="fs20rem c666 pt15rem pb15rem">{{ item.introduction }}</div> -->
						<div class="img-box flex pl15rem pr15rem">
							<img class="flex-center responsive-img" :src=" img_url + item.pic_cover+'?x-oss-process=image/resize,m_pad,w_200,h_200'" alt="">
						</div>
				 	</li>
				 </ul>
			</div>
		</section>
		<section class="rob pl30rem pr30rem pb80rem border-b20" v-if="bannerB.length>0">
			<div class="rob-title layout pt25 pb25">
				<h3 class="fs34rem bold">即将开启预售</h3>
				<router-link tag="p" to="/ordering/detail/more-detail/2" class="c999 fs24rem">查看更多<i class="iconfont icon-right2 ml10rem fs24rem"></i></router-link>
			</div>
			<swiper :data="bannerB" img-key="pic_cover_mid" :options="bannerBOptions" timeType="booking_starttime" status-link="status=2&ty=true" wh="w_200,h_200">
			</swiper>
		</section>
		<section class="recommend" v-if='recommand.length > 0'>
			<h3 class="product-title layout align-center"> 
				<p class="layout">
					<i class="rhombus rhombus-son"></i>
					<i class="rhombus ml15rem"></i>
				</p>
				<strong class='fs34rem c333 bold'>更多新品推荐</strong>
				<p class="layout">
					<i class="rhombus mr15rem"></i>
					<i class="rhombus rhombus-son"></i>
				</p>
			</h3>
			<div class="recommend-list">
				<ul class="pl30rem pr30rem list-ul layout flex-w">
				 	<li class="mb40rem" v-for="(item,index) in recommand" :key='index' @click="jumpDetail(item)">
				 		<div style="position:relative" v-if="item.activity_cate == '4'">
					 		<img class="responsive-img" :src=" img_url + item.pic_cover+'?x-oss-process=image/resize,m_pad,w_200,h_200'"alt="">
							<p class="fs36rem circle pl10rem pr10rem pt5rem pb5rem white" style="position:absolute;left:5px; bottom:5px; background-color:#F8474E;opacity:.8;">拼</p>
				 		</div>
						<div style="position:relative" v-else>
				 		<img class="responsive-img" :src=" img_url + item.pic_cover+'?x-oss-process=image/resize,m_pad,w_200,h_200'"alt="">
							<p class="fs20rem circle pl10rem pr10rem pt5rem pb5rem white  " style="position:absolute;left:10px; bottom:5px; background-color:#c715f8;opacity:.8;" >预售</p>
						</div>
				 		<p class="mt20rem fs30rem c333 bold ellipsis mb20rem">{{  item.goods_name }}</p>
				 		<div style="min-height:2rem;">
   							<p class="white pt5rem pb5rem pr10rem pl10rem mr10rem bg-red fs20rem radius" style="display: inline-block;" v-if="item.brand_name">{{ item.brand_name }}</p>
    					</div>
				 		<p class="pt10rem pb10rem">
				 			<strong class="mr5rem fs34rem red bold" v-if="item.activity_cate == '4'">￥{{ item.ping_price }}</strong>
				 			<strong class="mr5rem fs34rem red bold" v-else>￥{{ item.price }}</strong>
                            <del class="fs20rem c999 fr">原价:{{ item.market_price }}</del>
				 		</p>
						<div class="layout">
							<strong class="fs20rem c38 flex-center">预约倒计时</strong>
							<countdown :data="item.count_down" :type="true"></countdown>
						</div>
				 	</li>
				</ul>
			</div>
			<div style="height:3.571428rem;"></div>
		</section>
	</div>
</template>

<script>
	import { getHome, getRecommand } from "@/api/home";
	import Swiper from '@/components/Swiper';
	import SearchBar from '@/components/Search-bar';
	import Countdown from "@/components/Countdown";
	import Inform from "@/components/Inform";
	import { iosapp } from "@/utils";
	export default{
		components: {
			Swiper,
			SearchBar,
			Countdown,
			Inform,
		},
		data()
		{
			return{
				last          : '',
				data          : [],
				bannerB       : [],
				bannerC       : [],
				recommand     : [],
				img_url       : process.env.IMG_URL,
				showApp       : window.sessionStorage.getItem('isapp'),
				bannerBOptions:{
					slidesPerView :'auto',
					loopedSlides: 'auto',
					spaceBetween   : 8,
					autoplay: {
						delay: 5000,
					},
				},
				bannerCOptions:{
					slidesPerView :'auto',
					loopedSlides: 'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
				},
			}
		},
		created()
		{
			this.loadData();
			this.loadRecommand();
			if(this.showApp == '1')
				iosapp('backAction');
		},
		methods:
		{
			loadData()
			{
				getHome(2).then(res => {
					this.data = res.data;
					this.last = this.data.nav.length - 1 ;
					this.bannerC = res.data.banner;
					this.bannerB = res.data.come_goods;
				})
			},
			loadRecommand()
			{
				var params = {
					type       : 2,
					page_index : 1,
					page_size  : 20
				}
				getRecommand(params).then(res => {
					this.recommand = res.data;
				})
			},
			toSearch()
			{
				this.$router.push('/search');
			},
			jumpForDetail(item)
			{
		     	if(item.nav_url > '0' && item.nav_url != '2')
		     		this.$router.push('/ordering/detail/Ordering-nav/' + item.nav_url +'?type=2')

		     	switch(item.nav_url)
		     	{
		     		case '-6':
		     			this.$router.push("/ordering/detail/brand-detail/-6")
		     			return new Promise(() => {});
		     		case '-7':
		     			this.$router.push("/mall");
		     			return new Promise(() => {});
		     		case '2':
		     			this.$router.push("/more?type=2");
		     			return new Promise(() => {});
		     		case '-8':	
		     			this.$router.push("/ordering/detail/group");
		     			return new Promise(() => {});
		     	}

			},
			jumpDetail(item)
			{
				if(item.activity_cate == '4')
					this.$router.push('/ordering/detail/group-detail/' + item.goods_id + '?ping=1');
				else
					this.$router.push('/ordering/detail/commodity-detail/' + item.goods_id);
			}
		}
	}
</script>

<style lang="less">
	.ordering-index{
		.index-top{
			height: 90/28rem;
			background: #ff0036;
			.inform{
				color: #fff;
				position:relative;
				.hint{
					background: #fff;
					color: #ff0036;
					font-size: 20/28rem;
					text-align:center;
					width: 50/28rem;
					height: 25/28rem;
					line-height: 25/28rem;
					position: absolute;
					top:-5/28rem;
					right: -15/28rem;
					border-radius: 15/28rem;
				}
				i{
					font-size: 52/28rem;
				}
			}
			.search-mask{
				height: 3.2rem;
				width: 68%;
				position: absolute;			
				left:19%;
				z-index:2;
			}
		}
		.ordering-banner{
			.swiper-container{
				.swiper-wrapper{
					height: 380/28rem;
					.swiper-slide {
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}
		}
		.swiper-container{
			.swiper-wrapper{
				.swiper-slide {
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
		.count-down{
			span{
				border-radius: 5/28rem;
			}
			strong{
				i{
					display:block;
					width: 4/28rem;
					height: 4/28rem;
				}
			}
		}
		.nav{
			ul{
			    display: flex;
			    justify-content: flex-start;
			    flex-wrap: wrap;
			    li{
			      	text-align: center;
			      	width: 20%;
			     	margin-top: 40/28rem;
			        font-size: 26/28rem;
			        color: #333;
			        padding-top: 100/28rem;
			        display: block;
			        background-position: top center;
			        background-size: 86/28rem;
			        background-repeat: no-repeat;
			    }
		  	}
		}
		
		.ellipsis-more{
			height: 3.5rem;
			line-height: 150%;
		}
		.rob{
			.swiper-container{
				.swiper-wrapper{
					width: 100%;
				}
				.swiper-slide{
					width: 40% !important;
					text-align: center;
					box-shadow: 0 0 10px 0 #ddd;
					margin-bottom: 10/28rem;
					strong{
						display: block;
					}
				}
			}
			.count-down{
				padding-left: 30/28rem;
				padding-right: 30/28rem;
				i{
					font-size: 28/28rem;
					color: #ff0036;
				}
				.day{
					color:#f44336;
					font-size: 20/28rem;
				}
			}
		}
		.new-product{
			.product-list{
				.list-content{
					li{
						width: 179/28rem;
						background-color: #f6f6f6;
						height: 240/28rem;
						.img-box{
							height: 145/28rem;
							display: block;
							img{
								height:100%;
							}
						}
						&:nth-child(1){
							width: 241/28rem;
							height: 300/28rem;
							.img-box{
								height: 210/28rem;
							}
						}
						&:nth-child(2){
							width: 241/28rem;
							height: 300/28rem;

							.img-box{
								height: 210/28rem;
							}
						}
						&:nth-child(3){
							width: 241/28rem;
							height: 300/28rem;
							margin-right: 0;
							.img-box{
								height: 210/28rem;
							}
						}
						&:last-child{
							margin-right: 0;
						}
					}
					
				}
			}
		}
		.recommend-list{
			.list-ul{
				li{
					width: 48%;
					img{
						height: 366/28rem;
					}
					.count-down{
						span{
							background-color: #383838;
						}
						strong{
							i{
								background-color: #383838;
							}
						}
					}
					.experience{
			    		border-radius: 5/28rem;
			    		background-color: #ffdee5;
			    		padding:2/28rem 5/28rem;
			    		vertical-align: top;
		    		}
				}
			}
		}
	}
</style>